<template>
  <div style="margin-bottom:100px">
   <mt-header title="订单确认">
      <div slot="left">
        <mt-button @click="goBack" icon="back">返回</mt-button>
      </div>
    </mt-header>
    <div class="add clear">
      <div class="left">
        <span class="mui-icon mui-icon-location"></span>
      </div>
      <div class="mid">
        <p>收货人：小王  13512345678</p>
        <p>收货地址：陕西省西安市高新区高新二路***A2002</p>
      </div>
      <div class="right">
        <span class="mui-icon mui-icon-forward"></span>
      </div>
    </div>
    <div style="height:10px;backgroundColor:#efeff4;"></div>

    <div class="spx clear">
      <div class="pimg">
        <img :src="require('../../assets/img/xj.jpg')">
      </div>
      <div class="p_detail">
        <p>单反相机，彰显你的风格</p>
        <p>颜色：蓝色 内存：120G</p>
        <div>
          <span>10000积分</span>
          <span>×1</span>
        </div>  
      </div>  
    </div>	
    <div style="height:10px;backgroundColor:#efeff4;"></div>
    <!--列表-->
    <ul class="mui-table-view">
       <li class="mui-table-view-cell">
        <span>购买数量</span>
        <p class="p1">
         <span><img :src="require('../../assets/img/jian.jpg')"></span> 
         <span>1</span>
         <span><img :src="require('../../assets/img/jia.jpg')"></span> 
        </p>
      </li>
		     <li class="mui-table-view-cell">
           <span>配送方式</span>
           <span>快递 免邮 &gt;</span>
         </li>
		     <li class="mui-table-view-cell">
           <span style="width:90%">需要发票</span>
           <input type="checkbox">
         </li>
          <li class="mui-table-view-cell">
           <span style="width:90%">卖家留言</span>
           <input class="liuyan" type="text" placeholder="选填，对本次交易需要给商家留言">
         </li>
			</ul>
      <div style="height:50px;backgroundColor:#efeff4;"></div>
    <!--底部固定定位-->
    <div class="guding clear">
      <div class="ptext">
        <p>共<span>1</span>件 总积分：10000</p>
      </div>
      <router-link @click.native="jiazai" class="btn" to="" >
       <span>提交订单</span> 
      </router-link>
    </div>

  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
  data:function(){
    return{

    }
  },
  methods:{
     goBack(){
       this.$router.go(-1);
     },
     jiazai(){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push('/pay')
       },300)
     }
  }
}
</script>
<style scoped>
  .left,.mid,.right{
    float: left;
  }
  .left,.right{
    width: 10%;
    text-align: center;
  }
  .mid{
    width: 80%
  }
  .mui-icon{
    line-height: 75px;
    font-size: 20px;
  }
  .add{
    margin-top:20px;
  }
  .mid p:first-child{
    font-size: 1.5rem;
  }
  .p_detail,.pimg{
    float: left;
  }
  .pimg{
    width: 30%;
    text-align: center;
  }
  .pimg img{
    width: 80%;
   }
  .p_detail{
    width: 70%;
  }
  .p_detail p:nth-child(2){
    color: #999999;
    font-size: 1rem;
  }
  .p_detail p{
    margin: 0;
   }
  .p_detail div{
     margin-top: 5px;
    }
 .p_detail div>span{
      display:inline-block;
     
     }
  .p_detail div>span:first-child{
       color: #f44623;
        width: 80%;
        font-size: 1.6rem;
     }
  .spx{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .mui-table-view-cell{
    font-size: 1rem;
  }
  .mui-table-view-cell>span:first-child{
    width: 79%;
    display:inline-block;
   }
  .mui-table-view-cell .p1{
    display: inline-block;
    width: 20%
  }
   .p1 span:first-child,
   .p1 span:last-child{
    width:35%;
    display: inline-block;
  }
  .p1 img{
    width: 100%;
    vertical-align: middle;
   }
   .guding{
     position: fixed;
     width: 100%;
     height: 55px;
     bottom: 50px;
   }
   .guding .ptext{
     width: 60%;
     line-height: 55px;
     float: left;
     background-color: #fff;
   }
   .guding .ptext p{
     font-size: 1.8rem;
     text-align: center;
    }
    .guding .ptext span{
      color:#f44623;
    }
    .guding .btn{
      width: 40%;
      float:right;
      line-height: 55px;
      text-align: center;
      color:#fff;
      background-color: #00cc7d;
    }
    .liuyan{
      padding: 0;
      margin-top: 10px;
      font-size: 1rem;
    }
</style>